---
{
	"title": "Data JSON - Documentation",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Insert content extracted from a JSON file and leverage HTML 5 template element.",
	"altLangPage": "wb-data-json-fr.html",
	"dateModified": "2022-10-12"
}
---
<div class="wb-prettify all-pre"></div>

<section>
	<h2>Purpose</h2>
	<p>Insert content extracted from a JSON file or provided by a dataset.</p>
	<p>The role of this plugin is to display selected data into HTML elements, if you need to manipulate the data prior it get displayed or you need to interact with, then use this plugin in conjonction with the JSON-manager plugin that support dataset.</p>
</section>
<section>
	<h2>Use when</h2>
	<p>When you need to display the same atomic information on multiple pages. Like a fee for a services that is re-use across multiple pages.</p>
	<p>To insert repetitive content by using HTML5 template element.</p>
</section>
<section>
	<h2>Do not use when</h2>
	<ul>
		<li>To insert block of HTML content, instead use <a href="https://wet-boew.github.io/themes-dist/GCWeb/demos/data-ajax/data-ajax-en.html">data-ajax</a> with the filtering option if necessary.</li>
		<li>For inserting data that only apply to an unique page.</li>
	</ul>
</section>
<section>
	<h2>Working example</h2>
	<p>English:</p>
	<ul>
		<li><a href="../../../demos/wb-data-json/data-json-en.html">Data JSON</a></li>
		<li><a href="../../../demos/wb-data-json/template-en.html">HTML 5 template</a></li>
		<li><a href="../../../demos/wb-data-json/conditional-en.html">Conditional template</a></li>
	</ul>
	<p>French:</p>
	<ul>
		<li><a href="../../../demos/wb-data-json/data-json-fr.html" hreflang="fr">Data JSON</a></li>
		<li><a href="../../../demos/wb-data-json/template-fr.html" hreflang="fr" lang="fr">Gabarit HTML 5</a></li>
		<li><a href="../../../demos/wb-data-json/conditional-fr.html" hreflang="fr" lang="fr">Gabarit conditionnel</a></li>
	</ul>
	<div lang="en">
		<h2>Evaluation and report</h2>
		<ul>
			<li>Accessibility pre-assessment #1
				<ul>
					<li><a href="../../../demos/wb-data-json/reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment #1</span> English report</a></li>
					<li><a href="../../../demos/wb-data-json/reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment #1</span> French report</a></li>
				</ul>
			</li>
			<li>Accessibility assessment #1
				<ul>
					<li><a href="../../../demos/wb-data-json/reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment #1</span> English report</a></li>
					<li><a href="../../../demos/wb-data-json/reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment #1</span> French report</a></li>
				</ul>
			</li>
		</ul>
	</div>
</section>
<section>
	<h2>How to implement</h2>

	<ol>
		<li>Create a <a href="https://www.google.ca/search?q=validate+JSON#q=validate+JSON">valid JSON file</a></li>
		<li>The one of the following:
			<ul>
				<li>
					<p>Add one of the following data-json attributes to an element, with the attribute value being the URL of the JSON file followed by a <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer (RFC6901)</a> URL hash:</p>
					<ul>
						<li>
						<p><code>data-json-after</code>: Insert content after the element</p>
						<pre><code>&lt;span data-json-after=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
						<li>
						<p><code>data-json-append</code>: Insert content at the end of the element</p>
						<pre><code>&lt;span data-json-append=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
						<li>
						<p><code>data-json-before</code>: Insert content before the element</p>
						<pre><code>&lt;span data-json-before=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
						<li>
						<p><code>data-json-prepend</code>: Insert content at the start of the element</p>
						<pre><code>&lt;span data-json-prepend=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
						<li>
						<p><code>data-json-replace</code>: Replace content inside the element</p>
						<pre><code>&lt;span data-json-replace=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
						<li>
						<p><code>data-json-replacewith</code>: Replace the element by the content</p>
						<pre><code>&lt;span data-json-replacewith=&quot;json/data-en.json#/JSON/Pointer&quot;&gt;
			...
		&lt;/span&gt;</code></pre>
						</li>
					</ul>
				</li>
				<li>
					<p>For HTML5 templating, add the attribute <code>data-wb-json</code> on the elements you wanted to append items. The following populate a list:</p>
					<pre><code>&lt;ul data-wb-json='{
		&quot;url&quot;: &quot;data-en.json#/anArray&quot;,
		&quot;queryall&quot;: &quot;li&quot;,
		&quot;mapping&quot;: [
			&quot;/name&quot;
		]
	}'&gt;
	&lt;template&gt;
		&lt;li&gt;&lt;/li&gt;
	&lt;/template&gt;
&lt;/ul&gt;</code></pre>
					<p>Where:</p>
					<dl class="dl-horizontal">
						<dt><code>url</code></dt>
						<dd>JSON file location or dataset name followed by an optional JSON pointer</dd>
						<dt><code>queryall</code></dt>
						<dd>Contain a valid <a href="https://www.w3.org/TR/selectors/">CSS selector</a>.</dd>
						<dt><code>mapping</code></dt>
						<dd>Array of JSON pointer, as many as the return result of <code>queryall</code> applied on the <code>&lt;template&gt;</code> element.</dd>
					</dl>
					<p>Note: When using the template for filling a table, wrap your rows template into a <code>table</code> element in order to avoid a bug in Internet Explorer.</p>
				</li>
				<li>
					<p>Use the data for shaping multiple area of an HTML element</p>
					<pre><code>&lt;a href=&quot;generic/location.html&quot; data-wb-json='[
		{
			&quot;url&quot;: &quot;mydata.json#/first/title&quot;,
			&quot;type&quot;: &quot;replace&quot;
		},
		{
			&quot;url&quot;: &quot;mydata.json#/first/html_url&quot;,
			&quot;type&quot;: &quot;prop&quot;,
			&quot;prop&quot;: &quot;href&quot;
		}
	]'&gt;Generic location&lt;/a&gt;</code></pre>

				</li>
			</ul>
		</li>
	</ol>
</section>

<section>
<h2>Selecting data</h2>

<p>(Source: <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer, RCF6901</a>)</p>
<p>For example, given the JSON document</p>
<pre><code>{
	"foo": ["bar", "baz"],
	"": 0,
	"a/b": 1,
	"c%d": 2,
	"e^f": 3,
	"g|h": 4,
	"i\\j": 5,
	"k\"l": 6,
	" ": 7,
	"m~n": 8
}</code></pre>
<p>The following URI fragment identifiers evaluate to the accompanying values:</p>
<table class="table">
	<tr>
		<th>URI fragment</th>
		<th>Returning value</th>
	</tr>
	<tr>
		<td><code>#</code></td>
		<td>The whole document</td>
	</tr>
	<tr>
		<td><code>#/foo</code></td>
		<td><code>["bar", "baz"]</code></td>
	</tr>
	<tr>
		<td><code>#/foo/0</code></td>
		<td><code>"bar"</code></td>
	</tr>
	<tr>
		<td><code>#/</code></td>
		<td>0</td>
	</tr>
	<tr>
		<td><code>#/a~1b</code></td>
		<td>1</td>
	</tr>
	<tr>
		<td><code>#/c%25d</code></td>
		<td>2</td>
	</tr>
	<tr>
		<td><code>#/e%5Ef</code></td>
		<td>3</td>
	</tr>
	<tr>
		<td><code>#/g%7Ch</code></td>
		<td>4</td>
	</tr>
	<tr>
		<td><code>#/i%5Cj</code></td>
		<td>5</td>
	</tr>
	<tr>
		<td><code>#/k%22l</code></td>
		<td>6</td>
	</tr>
	<tr>
		<td><code>#/%20</code></td>
		<td>7</td>
	</tr>
	<tr>
		<td><code>#/m~0n</code></td>
		<td>8</td>
	</tr>
</table>
</section>

<section>
<h2>Issue that you may encounter</h2>
<dl>
	<dt>Display nothing, plugin seems to be broken.</dt>
	<dd>Ensure that your <a href="https://www.google.ca/search?q=validate+JSON#q=validate+JSON">JSON file is valid</a></dd>

	<dt>Recently updated data do not display</dt>
	<dd>Refresh your browser cache by opening a new tab the JSON file and then do a hard refresh <kbd>Ctrl + F5</kbd> or by testing your page from a new private mode session of your browser.</dd>
</dl>
</section>

<section>
<h2>HTML5 <code>template</code> element in the specification</h2>

<p>Official reference:</p>
<ul>
	<li><a href="https://www.w3.org/TR/html52/semantics-scripting.html#the-template-element">HTML5.2 W3C Working Draft - 4.12.3. The <code>template</code> element</a></li>
	<li><a href="https://www.w3.org/TR/html5/scripting-1.html#the-template-element">HTML5 W3C Recommendation - 4.11.3 The <code>template</code> element</a></li>
	<li><a href="https://html.spec.whatwg.org/multipage/scripting.html#the-template-element">WHATWG Living standard - 4.12.3 The <code>template</code> element</a></li>
</ul>

<p>The following was extracted from HTML5.2 spec:</p>

<h3>Contexts in which this element can be used.</h3>
<p>The following is a <em>non-normative</em> description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience.</p>
<ul>
	<li>Where <a href="https://www.w3.org/TR/html52/dom.html#metadata-content-2">metadata content</a> is expected.</li>
	<li>Where <a href="https://www.w3.org/TR/html52/dom.html#phrasing-content-2">phrasing content</a> is expected.</li>
	<li>Where <a href="https://www.w3.org/TR/html52/dom.html#script-supporting-elements-2">script-supporting</a> elements are expected.</li>
	<li>As a child of a <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-colgroup">colgroup</a></code> element that doesn’t have a span attribute.</li>
</ul>

<h3>Content model</h3>
<p>A normative description of what content must be included as children and descendants of the element.</p>

<ul>
	<li>Either: <a href="https://www.w3.org/TR/html52/dom.html#metadata-content-2">Metadata content</a>.</li>
	<li>Or: <a href="https://www.w3.org/TR/html52/dom.html#flow-content-2">Flow content</a>.</li>
	<li>Or: The content model of <code>&lt;ol&gt;</code> and <code><a href="https://www.w3.org/TR/html52/grouping-content.html#elementdef-ul">&lt;ul&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/grouping-content.html#elementdef-dl">&lt;dl&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/grouping-content.html#elementdef-figure">&lt;figure&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/textlevel-semantics.html#elementdef-ruby">&lt;ruby&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/semantics-embedded-content.html#elementdef-object">&lt;object&gt;</a></code> elements.</li>
	<li>Or: The content model of <code>&lt;video&gt;</code> and <code><a href="https://www.w3.org/TR/html52/semantics-embedded-content.html#elementdef-audio">audio</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-table">&lt;table&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-colgroup">&lt;colgroup&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-thead">&lt;thead&gt;</a></code>, <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-tbody">&lt;tbody&gt;</a></code>, and <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-tfoot">&lt;tfoot&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/tabular-data.html#elementdef-tr">&lt;tr&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/sec-forms.html#elementdef-fieldset">&lt;fieldset&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/sec-forms.html#elementdef-select">&lt;select&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/interactive-elements.html#elementdef-details">&lt;details&gt;</a></code> elements.</li>
	<li>Or: The content model of <code><a href="https://www.w3.org/TR/html52/interactive-elements.html#elementdef-menu">&lt;menu&gt;</a></code> elements whose <code>type</code> attribute is in the <a href="https://www.w3.org/TR/html52/interactive-elements.html#statedef-menu-popup-menu">popup menu</a> state.</li>
</ul>

<p>Note that the following elements, incomplete list, have a content model that could expect script-supporting elements: <code>ol</code>, <code>ul</code>, <code>dl</code>, <code>table</code>, <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>select</code>, <code>menu</code></p>
</section>

<section>
<h2 id="jsonObjToArr">Template - Transforming JSON object into an array</h2>

<p>Since WET 4.0.27 or without the <code>streamline</code> flag since WET 4.0.64 it is possible to iterate anything that is not an array to render content through a <code>&lt;template&gt;</code>. It simply get transformed into a array. There is a low risk of lost of information, only one specific use case. It's quite similar to the JSON-LD Expanded Form. In this transformation process, it assume the array key is an <a href="https://en.wikipedia.org/wiki/Internationalized_Resource_Identifier">IRI</a>. Then the will result include some property from JSON-LD such as <code>@id</code> and <code>@value</code>. The <code>@id</code> wont be overwritten, in those such case the array key will be discard after the transformation.</p>

<h3>When the value is a sub-object</h3>
<div class="row">
<div class="col-sm-6">
<p>Source</p>
<pre><code>{
	"key1": {
		"keyA": "value1",
		"keyB": "value2"
	},
	"key2": {
		"keyA": "value3",
		"keyB": "value4"
	}
}</code></pre>
</div>
<div class="col-sm-6">
<p>After</p>
<pre><code>[
	{
		"@id": "key1",
		"keyA": "value1",
		"keyB": "value2"
	},
	{
		"@id": "key2",
		"keyA": "value3",
		"keyB": "value4"
	}
]</code></pre>
</div></div>

<h3>When the value are not an object</h3>
<div class="row">
<div class="col-sm-6">
<p>Source</p>
<pre><code>{
	"key1": "value1",
	"key2": "value2",
	"key3": "value3"
}</code></pre>
</div>
<div class="col-sm-6">
<p>After</p>
<pre><code>[
	{
		"@id": "key1",
		"@value": "value1"
	},
	{
		"@id": "key2",
		"@value": "value2"
	},
	{
		"@id": "key3",
		"@value": "value3"
	}
]</code></pre>
</div></div>

<h3>When the value is a native data type</h3>
<p>Selecting the value of <code>key1</code> to iterate.</p>
<div class="row">
<div class="col-sm-6">
<p>Source</p>
<pre><code>{
	"key1": "value1"
}</code></pre>
</div>
<div class="col-sm-6">
<p>After</p>
<pre><code>{
	"key1": [
		"value1"
	]
}</code></pre>
</div></div>

<h3>When the value is an array</h3>
<div class="row">
<div class="col-sm-6">
<p>Source</p>
<pre><code>{
	"key1": [
		{ "keyA": "value1" },
		{ "keyA": "value2" }
	],
	"key2":  [
		{ "keyA": "value3" },
		{ "keyA": "value4" }
	]
}</code></pre>
</div>
<div class="col-sm-6">
<p>After</p>
<pre><code>[
	{
		"@id": "key1",
		"@value": [
			"keyA": "value1",
			"keyA": "value2"
		]
	},
	{
		"@id": "key2",
		"@value":
			"keyA": "value3",
			"keyA": "value4"
		]
	}
]</code></pre>
</div></div>

<h3>When the array key information will be lost</h3>
<p>Because the object already contains a field named <code>@id</code></p>
<div class="row">
<div class="col-sm-6">
<p>Source</p>
<pre><code>{
	"key1": {
		"@id": "https://wet-boew.github.io/vocab/example/1",
		"keyA": "value1",
		"keyB": "value2"
	},
	"key2": {
		"@id": "https://wet-boew.github.io/vocab/example/2",
		"keyA": "value3",
		"keyB": "value4"
	}
}</code></pre>
</div>
<div class="col-sm-6">
<p>After</p>
<pre><code>[
	{
		"@id": "https://wet-boew.github.io/vocab/example/1",
		"keyA": "value1",
		"keyB": "value2"
	},
	{
		"@id": "https://wet-boew.github.io/vocab/example/2",
		"keyA": "value3",
		"keyB": "value4"
	}
]</code></pre>
</div></div>

</section>

<section>
<h2>Cache busting</h2>
<p>Before to use the cache busting mechanism with your data json instance, it's highly recommended to configure your server properly instead.</p>
<p>Various strategy can be set on the server side and those are communicated to the browser through an http header as defined in <a href="https://tools.ietf.org/html/rfc7234#section-5">section 5 of RFC7234</a>.</p>
</section>

<section>
<h2 id="test-function">Test functions that extract a testable value</h2>
<p>Those test require a data pointer either provided with the <code>value</code> property which would also iterate or with <code>assess</code> which don't iterate.</p>

<dl class="dl-horizontal">
	<dt><code>fn:isArray</code></dt>
	<dd>Boolean returning if the tested value is an array or not.</dd>

	<dt><code>fn:isLiteral</code></dt>
	<dd>Boolean returning if the tested value is an literal or not. A literal value is considered to be defined and not an object.</dd>

	<dt><code>fn:getType</code></dt>
	<dd>Return type of the value set via the <code>@type</code> property or its corresponding javascript typeof value.</dd>

	<dt><code>fn:guessType</code></dt>
	<dd>
		<p>The template parser will try to guess the data type of the tested value.</p>
		<p>This test function will return:</p>
		<ul>
			<li><code>rdfs:Container</code> when the value is an array.</li>
			<li><code>rdfs:Literal</code> for any value that is literal. A literal value is considered to be defined and not an object.</li>
			<li><code>rdfs:Resource</code> when the value is an JSON object without any defined type.</li>
			<li><code>xsd:anyURI</code> when the value is a string which start with non-spaced letter and digit immediately followed by colon ":" like <code>https://example.com</code></li>
			<li><code>xsd:string</code> when the value is a string and don't look to be an URI.</li>
			<li><code>xsd:boolean</code> when the value is a boolean with the value set to <code>true</code> or <code>false</code></li>
			<li><code>xsd:double</code> when the value is a JSON number</li>
			<li>The value set via the <code>@type</code> sub property</li>
			<li><code>undefined</code> when the value is undefined</li>
		</ul>
	</dd>

	<dt><code>fn:getValue</code></dt>
	<dd>Return value as the testable value.</dd>
</dl>
</section>

<section>
<h2 id="operand-function">Operand function</h2>
<p>Operand functions that check the testable value.</p>

<dl class="dl-horizontal">
	<dt><code>softEq</code> (default)</dt>
	<dd>Check if the value is <strong>equivalent equal</strong> to the expectation optionally either in an array value. When no expectation provide, return true if the testable value exist.</dd>
	<dt><code>eq</code></dt>
	<dd>Check if the value <strong>equal</strong> the expectation. Including when the value is an object.</dd>
	<dt><code>neq</code></dt>
	<dd>Check if the value is <strong>not equal</strong> the expectation. Including when the value is an object.</dd>
	<dt><code>in</code></dt>
	<dd>Check if the value (or array of value) <strong>is in</strong> the expectation (or array of expectation)</dd>
	<dt><code>nin</code></dt>
	<dd>Check if the value (or array of value) <strong>is not in</strong> the expectation (or array of expectation)</dd>
</dl>
</section>

<section>
	<h2>Configuration options</h2>
	<table class="table">
	<thead>
	<tr>
		<th>Option</th>
		<th>Description</th>
		<th>How to configure</th>
		<th>Values</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td>Insertion type</td>
		<td>Configure the origin and destination of the content to be extracted from a JSON file.</td>
		<td>Add the configuration attribute to the affected element with the value being the URL followed by a JSON pointer hash of the data to be inserted.</td>
		<td>
			<dl>
				<dt><code>data-json-after</code>:</dt>
				<dd>Insert content after the element</dd>
				<dt><code>data-json-append</code>:</dt>
				<dd>Insert content at the end of the element</dd>
				<dt><code>data-json-before</code>:</dt>
				<dd>Insert content before the element</dd>
				<dt><code>data-json-prepend</code>:</dt>
				<dd>Insert content at the start of the element</dd>
				<dt><code>data-json-replace</code>:</dt>
				<dd>Replace content inside the element</dd>
				<dt><code>data-json-replacewith</code>:</dt>
				<dd>Replace the element by the content</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>url</code></td>
		<td><strong>Required</strong>. Define the url or the dataset name to use. When used in a template mode, the URL should point to an array object.</td>
		<td>You can follow the url or the dataset name by a <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer (RFC6901)</a>.</td>
		<td>
			<dl>
				<dt><code>data-wb-json='{ "url": "location/of/json/file.json#/" }'</code></dt>
				<dd>The url are a json file</dd>
				<dt><code>data-wb-json='{ "url": "[datasetName]#/" }'</code></dt>
				<dd>The url is a reference to a dataset managed by a json-manager defined in the page</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>type</code></td>
		<td>Configure the origin and destination of the content to be extracted from a JSON file. Similar of using the insertion type.</td>
		<td>Add a value to type that is recognized, if leaved it it will assume it's means template.</td>
		<td>
			<dl>
				<dt><code>template</code></dt>
				<dd>(Default) Apply the HTML template by using the json.</dd>
				<dt><code>addclass</code></dt>
				<dd>Add a class to the element</dd>
				<dt><code>after</code></dt>
				<dd>Insert content after the element</dd>
				<dt><code>append</code></dt>
				<dd>Insert content at the end of the element</dd>
				<dt><code>attr</code></dt>
				<dd>Change an attribute on the element. It's require also the configuration <code>attr</code> which contain the attribute name.</dd>
				<dt><code>before</code></dt>
				<dd>Insert content before the element</dd>
				<dt><code>removeclass</code></dt>
				<dd>Remove a class to the element</dd>
				<dt><code>replace</code></dt>
				<dd>Replace content inside the element</dd>
				<dt><code>replacewith</code></dt>
				<dd>Replace the element by the content</dd>
				<dt><code>prepend</code></dt>
				<dd>Insert content at the start of the element</dd>
				<dt><code>prop</code></dt>
				<dd>Change a property on the element. It's require also the configuration <code>prop</code> which contain the attribute name.</dd>
				<dt><code>val</code></dt>
				<dd>Set a value on an input element.</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>attr</code></td>
		<td>Specify the element attribute name. Only required when <code>type="attr"</code>.</td>
		<td><code>data-wb-json='{ "url": "", "type": "attr", "attr": "href" }'</code></td>
		<td>A valid attribute name supported by the element and be one of the following <code>href, src, data-*, aria-*, role, pattern, min, max, step, low, high, lang, hreflang, action</code>.</td>
	</tr>
	<tr>
		<td><code>prop</code></td>
		<td>Specify the element attribute name. Only required when <code>type="prop"</code>.</td>
		<td><code>data-wb-json='{ "url": "", "type": "prop", "prop": "disabled" }'</code></td>
		<td>A valid attribute considered as a property supported by the element and be one of the following <code>checked, selected, disabled, required, readonly, multiple, hidden</code>.</td>
	</tr>
	<tr>
		<td><code>queryall</code></td>
		<td>Template only. Selects elements inside the cloned template. It's assumed the mapping represent the number of returned results of this query.</td>
		<td><code>data-wb-json='{ "url": "", "queryall": "li" }'</code></td>
		<td>Contain a valid <a href="https://www.w3.org/TR/selectors/">CSS selector</a>.</td>
	</tr>
	<tr>
		<td><code>tobeclone</code></td>
		<td>Template only. Selects an elements inside the template that will be cloned for the mapping and the insertion. It's assumed the mapping represent the number of returned results of this query. When it's specified, this returning value is considered as the root of the mapping object selector and for the queryall options.</td>
		<td><code>data-wb-json='{ "url": "", "queryall": "li" }'</code></td>
		<td>
			<dl>
				<dt>Default</dt>
				<dd>All the children elements of the source template</dd>
				<dt>If defined</dt>
				<dd>A valid <a href="https://www.w3.org/TR/selectors/">CSS selector</a>.</dd>
			</dl>
		</td>
	</tr>
	<tr class="text-muted">
		<td><code>filter</code> <span class="label label-warning">Deprecated</span></td>
		<td>
			<p><strong>Use the filtering feature from the JSON manager instead.</strong></p>
			<p>Template only. Validating for truthiness to allow array items to be processed by the template. Contains an array of evaluation criteria for array items.</p>
		</td>
		<td><code>data-wb-json='{ "url": "", "filter": [ {evaluation object} ] }'</code></td>
		<td>
			Evaluation object have the following property
			<dl>
				<dt><code>path</code></dt>
				<dd>Required. JSON pointer to the data being evaluated</dd>
				<dt><code>value</code></dt>
				<dd>Required. Value of witch the data would be evaluated</dd>
				<dt><code>optional</code></dt>
				<dd>Indicated if the evaluation is optional.</dd>
			</dl>
		</td>
	</tr>
	<tr class="text-muted">
		<td>Evaluation object <code>path</code> <span class="label label-warning">Deprecated</span></td>
		<td>
			<p><strong>Use the filtering feature from the JSON manager instead.</strong></p>
			<p>Template only, for evaluation object and required. JSON pointer to the data being evaluated. It's must start with an "/".</p>
		</td>
		<td><code>data-wb-json='{ "url": "", "filter": [ { "path": "/JSON Pointer" } ] }'</code></td>
		<td>A valid <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer (RFC6901)</a></td>
	</tr>
	<tr class="text-muted">
		<td>Evaluation object <code>value</code> <span class="label label-warning">Deprecated</span></td>
		<td>
			<p><strong>Use the filtering feature from the JSON manager instead.</strong></p>
			<p>Template only, for evaluation object and required.</p>
		</td>
		<td><code>data-wb-json='{ "url": "", "filter": [ { "value": "A value" } ] }'</code></td>
		<td>Any value that could be compared with the information retrieved form the path.</td>
	</tr>
	<tr class="text-muted">
		<td>Evaluation object <code>optional</code> <span class="label label-warning">Deprecated</span></td>
		<td>
			<p><strong>Use the filtering feature from the JSON manager instead.</strong></p>
			<p>Template only and for evaluation object.</p>
		</td>
		<td><code>data-wb-json='{ "url": "", "filter": [ { "optional": true } ] }'</code></td>
		<td>True or false. If omitted it will be false by default.</td>
	</tr>
	<tr class="text-muted">
		<td><code>filternot</code> <span class="label label-warning">Deprecated</span></td>
		<td>
			<p><strong>Use the filtering feature from the JSON manager instead.</strong></p>
			<p>Template only. Validating for falseness to disallow an array items to be processed by the template. Contains an array of evaluation criteria for array items.</p>
		</td>
		<td><code>data-wb-json='{ "url": "", "filternot": [ {evaluation object} ] }'</code></td>
		<td>
			Evaluation object have the following property
			<dl>
				<dt><code>path</code></dt>
				<dd>Required. JSON pointer to the data being evaluated</dd>
				<dt><code>value</code></dt>
				<dd>Required. Value of witch the data would be evaluated</dd>
				<dt><code>optional</code></dt>
				<dd>Indicated if the evaluation is optional.</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>source</code></td>
		<td>Template only. Pointer to the template elements. Not required when the template is the child of the host element.</td>
		<td><code>data-wb-json='{ "url": "", "source": "#idToMyTemplate" }'</code></td>
		<td>JQuery selector that represent the template element on the current page.</td>
	</tr>
	<tr>
		<td><code>streamline</code></td>
		<td>Template only. Indicate not to initiate the process of iterating the data and instead execute the mapping object directly</td>
		<td><code>data-wb-json='{ "url": "", "streamline": true|false }'</code></td>
		<td>JQuery selector that represent the template element on the current page.</td>
	</tr>
	<tr>
		<td><code>mapping</code></td>
		<td>Template only. Array of string representing a JSON pointer or object where it specify how to bind the data with the template content. If the configuration <code>queryall</code> is used, the number of items in the mapping must match the number of returning result of the queryall. In the other hand, if <code>queryall</code> configuration is not specified, than each mapping object must define a <code>selector</code> configuration.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ "JSON Pointer", "JSON Pointer" ] }'</code> or <code>data-wb-json='{ "url": "", "mapping": [ {mapping object}, {mapping object} ] }'</code></td>
		<td>
			<p>When queryall is not specified, it's is an array of string with a the JSON pointer. (Equivalent to the value in the Mapping object)</p>
			<p>A mapping object can contain another mapping object to support sub-template. That inner mapping can also contain it's own <code>queryall</code> configuration.</p>
			<p>When its value is explicitly set to <code>null</code>, the associated template object won't be used to map data.</p>
		</td>
	</tr>

	<tr>
		<td>Mapping object <code>selector</code></td>
		<td>Template only, for mapping object and required when <code>queryall</code> is not specified. Should selects one element inside the cloned template. When selecting an array, that allow you run sub-template. To configure a sub-template, the mapping object is extended like: you can optionally set the "source" configuration, optionally set the "queryall" configuration and you can also set a inner "mapping" object for the mapping of the sub-template.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "selector": "A CSS Selector" } ] }'</code></td>
		<td>A valid <a href="https://www.w3.org/TR/selectors/">CSS selector</a>.</td>
	</tr>
	<tr>
		<td>Mapping object <code>value</code></td>
		<td>Template only, for mapping object and required when <code>queryall</code> is not specified. JSON Pointer representing the data to be mapped.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "value": "A JSON Pointer" } ] }'</code></td>
		<td>A valid <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer (RFC6901)</a></td>
	</tr>
	<tr>
		<td>Mapping object <code>placeholder</code></td>
		<td>Template only, for mapping object and optional when <code>queryall</code> is not specified. String representing the placeholder to replace by the selected data</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "placeholder": "{{name}}" } ] }'</code></td>
		<td>A findable string in the selected element in the template.</td>
	</tr>
	<tr>
		<td>Mapping object <code>attr</code></td>
		<td>Template only, for mapping object and optional when <code>queryall</code> is not specified. Name of an attribute where the selected data will replace his value.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "attr": "href" } ] }'</code></td>
		<td>A valid attribute of the selected element.</td>
	</tr>
	<tr>
		<td>Mapping object <code>isHTML</code></td>
		<td>Template only, for mapping object and optional when <code>queryall</code> is not specified. Flag indicating if the content to be mapped is a string HTML.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "isHTML": "true" } ] }'</code></td>
		<td>A valid attribute of the selected element.</td>
	</tr>
	<tr>
		<td>Mapping object <code>test</code></td>
		<td>Test functions that extract a testable value. It requires a JSON pointer provided by either the mapping property <code>assess</code> or <code>value</code>.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "test": "Test-Technical-Name" } ] }'</code></td>
		<td>A valid technical test name like <code>fn:guessType</code>. See the <a href="#test-function">predefined list of test function</a></td>
	</tr>
	<tr>
		<td>Mapping object <code>assess</code></td>
		<td>(JSON Pointer) This the value to take for performing the conditional evaluation. Alternatively, it will take the value from the <code>value</code> property. Another difference is the <code>assess</code> would not be iterated compared to <code>value</code> which would be iterated for the inner mapping.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "assess": "A JSON Pointer", "test": "Test-Technical-Name" } ] }'</code></td>
		<td>A valid <a href="https://tools.ietf.org/html/rfc6901">JSON Pointer (RFC6901)</a></td>
	</tr>
	<tr>
		<td>Mapping object <code>expect</code></td>
		<td>The value which is going to be compared by the operand. If not provided it will use the trueness state of the testable value return by the test function.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "expect": "A value", "assess": "A JSON Pointer", "test": "Test-Technical-Name" } ] }'</code></td>
		<td>A string or an JSON object use for comparison by the operand.</td>
	</tr>
	<tr>
		<td>Mapping object <code>operand</code></td>
		<td>Operand functions that evaluate the testable value against the expected value.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "operand": "Operand-Technical-Name", "assess": "A JSON Pointer", "test": "Test-Technical-Name" } ] }'</code></td>
		<td>A valid operand name like <code>fn:eq</code>. See the <a href="#operand-function">predefined list of operand function</a></td>
	</tr>
	<tr>
		<td>Mapping object <code>@type</code></td>
		<td>Mapping function to use in order to process the data and the configuration.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "@type": "rdf:Alt", "mapping": [ ... ] } ] }'</code></td>
		<td>
			<dl>
				<dt><code>rdf:Alt</code></dt>
				<dd>Allow to configure a list of mapping where it's going to execute only the first children passing its test condition. The rdf:Alt type require the mapping property <code>mapping</code>.</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td>Mapping object <code>append</code></td>
		<td>Force the content created via the template to be append from the template parent element instead of being inserted in-place.</td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "append": "true" } ] }'</code></td>
		<td>Boolean indicating if the content need to be append.</td>
	</tr>
	<tr>
		<td>Mapping object <code>encode</code></td>
		<td>Indicate to encode the content if its type is <code>rdf:HTML</code></td>
		<td><code>data-wb-json='{ "url": "", "mapping": [ { "encode": true|false } ] }'</code></td>
		<td>Boolean indicating if the content need to be encoded when the id reference are followed.</td>
	</tr>
	<tr>
		<td><code>appendto</code></td>
		<td>Template only. When the elements are outside the editing area, this specified the element to use to append the template. Specifying the data-json directly of the elements should remain how it is used. Note: Since WET 4.0.27 a bug fix has change the behavior of one use case depending how the mapping is configured. Since WET 4.0.27, using the data-json template is always done against an JSON array.</td>
		<td><code>data-wb-json='{ "url": "", "appendto": "title" }'</code></td>
		<td>A valid jQuery selector.</td>
	</tr>
	<tr>
		<td><code>nocache</code></td>
		<td>Prevent caching. Prior using the functionality, use the various caching strategies that can be set and communicated through http header from your server, as defined in <a href="https://tools.ietf.org/html/rfc7234#section-5">section 5 of RFC7234</a>. Also, please note that some server may not like to have an query appended to his url and you may get an HTTP error like "400 Bad Request" or "404 Not Found". Like a page served by a domino server will return 404 error if the query string do not start with "<code>?open</code>", "<code>?openDocument</code>" or "<code>?readForm</code>".</td>
		<td><code>data-wb-json='{ "url": "", "nocache": true }'</code> or <code>data-wb-json='{ "url": "", "nocache": "nocache" }'</code></td>
		<td>
			<dl>
				<dt>Default</dt>
				<dd>The browser will manage the cache based on how the server has sent the file.</dd>
				<dt><code>true</code></dt>
				<dd>Boolean, Use the same cache buster id for the user session. Closing and opening the tab should generate a new cache busting id.</dd>
				<dt><code>nocache</code></dt>
				<dd>String, A new id is generated every time the file is fetched</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>nocachekey</code></td>
		<td>Prevent caching. Optional, it defined what query parameter name to use for the cache busting.</td>
		<td><code>data-wb-json='{ "url": "", "nocache": true, "nocachekey": "wbCacheBust" }'</code></td>
		<td>
			<dl>
				<dt>Default</dt>
				<dd>Will use "<code>wbCacheBust</code>" for the parameter name.</dd>
				<dt>String</dt>
				<dd>URL pre-encoded string</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>data</code></td>
		<td>Add parameter in the request body.</td>
		<td><code>data-wb-json='{ "url": "", "data": { "prop": "value" } }'</code> or <code>data-wb-json='{ "url": "", "data": "prop=value" } }'</code></td>
		<td>
			<dl>
				<dt>Default</dt>
				<dd>No data are sent in the request body</dd>
				<dt>String</dt>
				<dd>The value is sent as is in the request body</dd>
				<dt>Javascript Object</dt>
				<dd>The value is stringify before to be added to the request body</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>contenttype</code></td>
		<td>Set the content type of the request body when data are sent</td>
		<td><code>data-wb-json='{ "url": "", "contenttype": "text/turtle", "data": "" }'</code></td>
		<td>
			<dl>
				<dt>Default</dt>
				<dd>When data is added, application/json</dd>
				<dt>String</dt>
				<dd>A valid content type as defined in the <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">IANA media type registry</a>.</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>method</code></td>
		<td>Set the HTTP method to be use when fetching the resource.</td>
		<td><code>data-wb-json='{ "url": "", "data": "", "method": "PUT" }'</code></td>
		<td>
			<dl>
				<dt>Default (no data)</dt>
				<dd>The method is "GET".</dd>
				<dt>Default (with data)</dt>
				<dd>The method is "POST".</dd>
				<dt>String</dt>
				<dd>A valid method allowed by the browser.</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>trigger</code></td>
		<td>Initiate WET features for the content rendered with a template.</td>
		<td><code>data-wb-json='{ "url": "", "trigger": true }'</code></td>
		<td>
			<dl>
				<dt>false (default):</dt>
				<dd>Content is kept as is.</dd>
				<dt>true:</dt>
				<dd>Will initiate any WET feature on rendered content</dd>
			</dl>
		</td>
	</tr>
	<tr>
		<td><code>fail</code></td>
		<td>Configuration and mapping instruction to follow when fetching a JSON do fail.</td>
		<td><code>data-wb-json='{ "url": "", "fail": { "template": &lt;See template config>, "mapping": &lt;See mapping config> } }'</code></td>
		<td>
			<p>The configuration <code>template</code> and <code>mapping</code> must be defined if a failure condition is defined.</p>
			<p>The following static content object can be mapped:</p>
			<pre><code>{
	error: "&lt;Details of the error in English>",
	status: "&lt;Status or category of the error>",
	url: "&lt;Relative URL of the failed resource>",
	response: {
		text: "&lt;Text version of the resource sanitized, if applicable>",
		status: "&lt;HTTP status number>",
		statusText: "&lt;HTTP status text>"
	}
}</code></pre>
		</td>
	</tr>

	</tbody>
	</table>
</section>
<section>
	<h2>Events</h2>
	<table class="table">
	<thead>
	<tr>
	<th>Event</th>
	<th>Trigger</th>
	<th>What it does</th>
	</tr>
	</thead>
	<tbody>

	<tr>
	<td><code>wb-init.wb-data-json</code></td>
	<td>Triggered manually (e.g., <code>$( "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]" ).trigger( "wb-init.wb-data-json" );</code>).</td>
	<td>Used to manually initialize the Data JSON plugin. <strong>Note:</strong> The Data JSON plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
	</tr>
	<tr>
	<td><code>wb-ready.wb-data-json</code></td>
	<td>Triggered automatically after the content has been inserted.</td>
	<td>Used to identify where content has been inserted in by the plugin (target of the event) and to pass along how the content was included ("after", "append", "before", "prepend", "replace" or "replacewith").
	<pre><code>$( document ).on( "wb-ready.wb-data-json", "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]", function( event, ajaxType ) {
	});</code></pre>
	<pre><code>$( "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]" ).on( "wb-ready.wb-data-json", function( event, ajaxType ) {
	});</code></pre>
	</td>
	</tr>
	<tr>
	<td><code>wb-ready.wb</code></td>
	<td>Triggered automatically when WET has finished loading and executing.</td>
	<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
	<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
	});</code></pre>
	</td>
	</tr>
	<tr>
	<td><code>wb-contentupdated</code></td>
	<td>Triggered automatically when data-json has finished to load the response.</td>
	<td>Use to perform a secondary action upon inserted content
	<pre><code>$('#mycontainer').on( "wb-contentupdated", function( event, data ){
	});</code></pre>
	</td>
	</tr>
	</tbody>
	</table>
</section>
<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/GCWeb/tree/master/src/plugins/data-json">Data JSON plugin source code on GitHub</a></p>
</section>
